<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>货币资金及占比情况分析</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
        }
        .container {
            width: 95%;
            max-width: 1200px;
            background-color: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            padding: 25px;
            margin-top: 20px;
        }
        .header {
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eaeaea;
        }
        .header h1 {
            color: #2c3e50;
            font-size: 2.2rem;
            margin-bottom: 10px;
        }
        .header p {
            color: #7f8c8d;
            font-size: 1.1rem;
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.6;
        }
        .chart-container {
            width: 100%;
            height: 500px;
        }
        .footer {
            margin-top: 25px;
            text-align: center;
            color: #7f8c8d;
            font-size: 0.9rem;
        }
        @media (max-width: 768px) {
            .header h1 {
                font-size: 1.8rem;
            }
            .chart-container {
                height: 400px;
            }
        }
        @media (max-width: 480px) {
            .container {
                padding: 15px;
            }
            .header h1 {
                font-size: 1.5rem;
            }
            .chart-container {
                height: 350px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>货币资金及占比趋势分析</h1>
            <p>本图表展示了2006年至2024年间货币资金的数值变化（柱状图）以及货币资金占总资产的百分比变化（折线图）。通过双Y轴设计，可以同时观察绝对数值和相对比例的变化趋势。</p>
        </div>
        <div id="chart" class="chart-container"></div>
        <div class="footer">
            <p>数据来源：企业财务报表 | 分析时间：2024年</p>
        </div>
    </div>

    <script>
        // 初始化ECharts实例
        const chartDom = document.getElementById('chart');
        const myChart = echarts.init(chartDom);
        
        // 准备数据
        const years = ['2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', 
                      '2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023', '2024','2025'];
        
        const moneyData = [24.44, 42.76, 51.84, 48.46, 99.43, 182.12, 231.91, 257.56, 200.45, 228.53, 
                          305.73, 344.61, 424.26, 498.92, 556.73, 766.48, 753.22, 925.57, 1287.15,1483.20];
        
        const ratioData = [0.2464, 0.3693, 0.4152, 0.2918, 0.4277, 0.5621, 0.5847, 0.5717, 0.4484, 0.4822,
                         0.5099, 0.5348, 0.5275, 0.5664, 0.5898, 0.6152, 0.5780, 0.6147, 0.6921,0.7668];
        
        // 配置项
        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                },
                formatter: function(params) {
                    let result = `${params[0].name}<br/>`;
                    params.forEach(param => {
                        if (param.seriesName === '货币资金') {
                            result += `${param.seriesName}: ${param.value} 亿元<br/>`;
                        } else {
                            result += `${param.seriesName}: ${(param.value * 100).toFixed(2)}%<br/>`;
                        }
                    });
                    return result;
                }
            },
            legend: {
                data: ['货币资金', '货币资金占比'],
                top: 10
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: years,
                    axisPointer: {
                        type: 'shadow'
                    },
                    axisLabel: {
                        interval: 1, // 显示所有年份标签
                        rotate: 45  // 倾斜45度避免重叠
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '货币资金(亿元)',
                    min: 0,
                    axisLabel: {
                        formatter: '{value}'
                    }
                },
                {
                    type: 'value',
                    name: '占比',
                    min: 0,
                    max: 0.8,
                    axisLabel: {
                        formatter: function(value) {
                            return (value * 100).toFixed(0) + '%';
                        }
                    }
                }
            ],
            series: [
                {
                    name: '货币资金',
                    type: 'bar',
                    barWidth: '50%',
                    data: moneyData,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#83bff6' },
                            { offset: 0.5, color: '#188df0' },
                            { offset: 1, color: '#188df0' }
                        ])
                    },
                    emphasis: {
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#2378f7' },
                                { offset: 0.7, color: '#2378f7' },
                                { offset: 1, color: '#83bff6' }
                            ])
                        }
                    }
                },
                {
                    name: '货币资金占比',
                    type: 'line',
                    yAxisIndex: 1,
                    data: ratioData,
                    symbol: 'circle',
                    symbolSize: 8,
                    lineStyle: {
                        width: 3,
                        color: '#ff6b6b'
                    },
                    itemStyle: {
                        color: '#ff6b6b'
                    }
                }
            ],
            dataZoom: [
                {
                    type: 'inside',
                    start: 0,
                    end: 100
                },
                {
                    type: 'slider',
                    start: 0,
                    end: 100
                }
            ]
        };
        
        // 应用配置项
        myChart.setOption(option);
        
        // 响应窗口大小变化
        window.addEventListener('resize', function() {
            myChart.resize();
        });
    </script>
</body>
</html>